let s=[];
var data = [
    {
        chec:'<input type="checkbox">',
        id: '<span data-toggle="modal" data-target="#myModal1" class="btn-z">2019004</span>   ',
        name: '<span data-toggle="modal" data-target="#myModal1" class="btn-z">秦勤</span>',
        sex: '<span data-toggle="modal" data-target="#myModal1" class="btn-z">女</span>',
        classic: '<span data-toggle="modal" data-target="#myModal1" class="btn-z">星星班</span>',
        offer: '<span data-toggle="modal" data-target="#myModal1" class="btn-z">班主任</span>',
        tel: '<span data-toggle="modal" data-target="#myModal1" class="btn-z">18015214526</span>',
        rev:'<a href="javascript:;"><span class="iconfont" data-target="#xiugai" data-toggle="modal" id="change">&#xe6e5;</span></a>',
        dalete:'<a href="javascript:;"><span class="iconfont" data-target="#canles" data-toggle="modal">&#xe638;</span></a>',
    }, {
        chec:'<input type="checkbox">',
        id: '<span data-toggle="modal" data-target="#myModal1" class="btn-z">2019005</span>   ',
        name: '<span data-toggle="modal" data-target="#myModal1" class="btn-z">赵敏</span>',
        sex: '<span data-toggle="modal" data-target="#myModal1" class="btn-z">女</span>',
        classic: '<span data-toggle="modal" data-target="#myModal1" class="btn-z">旅行班</span>',
        offer: '<span data-toggle="modal" data-target="#myModal1" class="btn-z">班主任</span>',
        tel: '<span data-toggle="modal" data-target="#myModal1" class="btn-z">18015214526</span>',
        rev:'<a href="javascript:;"><span class="iconfont" data-target="#xiugai" data-toggle="modal" id="change">&#xe6e5;</span></a>',
        dalete:'<a href="javascript:;"><span class="iconfont" data-target="#canles" data-toggle="modal">&#xe638;</span></a>',
    }, {
        chec:'<input type="checkbox">',
        id: '<span data-toggle="modal" data-target="#myModal1" class="btn-z">2019006</span>   ',
        name: '<span data-toggle="modal" data-target="#myModal1" class="btn-z">珠儿</span>',
        sex: '<span data-toggle="modal" data-target="#myModal1" class="btn-z">女</span>',
        classic: '<span data-toggle="modal" data-target="#myModal1" class="btn-z">黑土班</span>',
        offer: '<span data-toggle="modal" data-target="#myModal1" class="btn-z">教师</span>',
        tel: '<span data-toggle="modal" data-target="#myModal1" class="btn-z">18015214526</span>',
        rev:'<a href="javascript:;"><span class="iconfont" data-target="#xiugai" data-toggle="modal" id="change">&#xe6e5;</span></a>',
        dalete:'<a href="javascript:;"><span class="iconfont" data-target="#canles" data-toggle="modal">&#xe638;</span></a>',
    }, {
        chec:'<input type="checkbox">',
        id: '<span data-toggle="modal" data-target="#myModal1" class="btn-z">2019007</span>   ',
        name: '<span data-toggle="modal" data-target="#myModal1" class="btn-z">阿紫</span>',
        sex: '<span data-toggle="modal" data-target="#myModal1" class="btn-z">女</span>',
        classic: '<span data-toggle="modal" data-target="#myModal1" class="btn-z">-</span>',
        offer: '<span data-toggle="modal" data-target="#myModal1" class="btn-z">保洁</span>',
        tel: '<span data-toggle="modal" data-target="#myModal1" class="btn-z">18015214526</span>',
        rev:'<a href="javascript:;"><span class="iconfont" data-target="#xiugai" data-toggle="modal" id="change">&#xe6e5;</span></a>',
        dalete:'<a href="javascript:;"><span class="iconfont" data-target="#canles" data-toggle="modal">&#xe638;</span></a>',
    },{
        chec:'<input type="checkbox">',
        id: '<span data-toggle="modal" data-target="#myModal1" class="btn-z">2019008</span>   ',
        name: '<span data-toggle="modal" data-target="#myModal1" class="btn-z">虚竹</span>',
        sex: '<span data-toggle="modal" data-target="#myModal1" class="btn-z">男</span>',
        classic: '<span data-toggle="modal" data-target="#myModal1" class="btn-z">-</span>',
        offer: '<span data-toggle="modal" data-target="#myModal1" class="btn-z">保安</span>',
        tel: '<span data-toggle="modal" data-target="#myModal1" class="btn-z">18015214526</span>',
        rev:'<a href="javascript:;"><span class="iconfont" data-target="#xiugai" data-toggle="modal" id="change">&#xe6e5;</span></a>',
        dalete:'<a href="javascript:;"><span class="iconfont" data-target="#canles" data-toggle="modal">&#xe638;</span></a>',
    }
];
//将json里面的值添加到表格中
let target = null;
var oT=document.querySelector('tbody');
data.forEach(function (v,i) {
    var oTr=document.createElement('tr');
    // oTr.classList.push('yc-tr');
    oTr.setAttribute('class','yc-tr');
    // $(this).addClass('');
    oTr.innerHTML=`
            <td>${v.chec}</td>
            <td>${v.id}</td>
            <td>${v.name}</td>
            <td>${v.sex}</td>
            <td>${v.classic}</td>
            <td>${v.offer}</td>
            <td>${v.tel}</td>
            <td>${v.rev}</td>
            <td>${v.dalete}</td>
        `;

    oT.appendChild(oTr);
    s.push(oTr);
});
//获取表格里面的值加入详情页
$('tbody').click(function (e) {
    let i = e.originalEvent.path[2].children;
    $('.theaName').text(i[1].innerText);
    $('.theaSex').text(i[2].innerText);
    $('.theaTel').text(i[3].innerText);
    $('.classroom').text(i[4].innerText);
    $('.theaId').text(i[5].innerText);
    $('.theaOffer').text(i[6].innerText);
});
//删除
$('#btn-2').click(function () {
    for (let i=0;i<s.length;i++) {
        if (s[i]===target){
            data.pop(i);
            target.remove();
        }
    }

});
$('tbody').on('click','span',function (e) {
    target=e.originalEvent.path[3]
});
//自定义添加
$('#yes').click(function btn() {
    data.push({
        chec:'<input type="checkbox">',
        id:$('#card') .val(),
        name: $('#name') .val(),
        sex: $('#sex option:selected').val(),
        classic: $('#classic option:selected').val(),
        offer: $('#offer option:selected').val(),
        tel: $('#tel') .val(),
        rev:'<a href="javascript:;"><span class="iconfont" >&#xe6e5;</span></a>',
        dalete:'<a href="javascript:;"><span class="iconfont" data-target="#canles" data-toggle="modal">&#xe638;</span></a>',
    });
    let v = data[data.length-1];
        var oTr=document.createElement('tr');
        oTr.innerHTML=`
            <td><span data-toggle="modal" data-target="#myModal1" class="btn-z">${v.chec}</span></td>
            <td><span data-toggle="modal" data-target="#myModal1" class="btn-z">${v.id}</span></td>
            <td><span data-toggle="modal" data-target="#myModal1" class="btn-z">${v.name}</span></td>
            <td><span data-toggle="modal" data-target="#myModal1" class="btn-z">${v.sex}</span></td>
            <td><span data-toggle="modal" data-target="#myModal1" class="btn-z">${v.classic}</span></td>
            <td><span data-toggle="modal" data-target="#myModal1" class="btn-z">${v.offer}</span></td>
            <td><span data-toggle="modal" data-target="#myModal1" class="btn-z">${v.tel}</span></td>
            <td> ${v.rev}</td>
            <td>${v.dalete}</td>
        `;
        oT.appendChild(oTr);
        s.push(oTr);

});
//修改
$('#change').click(function (e) {
    let i = e.originalEvent.path[2].children;
    $('.theaName').text(i[1].innerText);
    $('.theaSex').text(i[2].innerText);
    $('.theaTel').text(i[3].innerText);
    $('.classroom').text(i[4].innerText);
    $('.theaId').text(i[5].innerText);
    $('.theaOffer').text(i[6].innerText);


});
//搜索
$('.yc-sou-btn').click(function () {
    // var reg = new RegExp($('.yc-sou').val(), 'g');
    reg = $('.yc-sou').val();
    if (reg.trim()) {
        $('.yc-tr').each(
            function () {
                var trs = $(this);
                let ok = false;
                $(this).children("td").text(
                    function () {
                        if (this.innerText.indexOf(reg)!==-1) {
                            ok = true
                        }
                    }
                );
                if (ok) {
                    trs.css('display', '');
                    trs.css('color', 'red');

                } else {
                    trs.css('display', 'none');
                    trs.css('color', '');

                }
            })
    }
    else{
        $('tr').each(function(){
            $(this).css('display', '');
            $(this).css('color', '');

        })
    }
});


